<template>
  <div>
    <h3 style="margin-left: 10px">水平导航-自定义样式
      <el-dropdown @command="userCommand" style="float: right">
        <!--      <el-icon><User/></el-icon>-->
        <span style="margin-right: 10px">个人中心</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="order">订单</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </h3>
    <el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
             text-color="#fff" active-text-color="#ffd04b" style="height: 40px;">
      <el-menu-item index="1">邓瑞编程</el-menu-item>
      <el-sub-menu index="2">
        <template #title>我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>
    <hr>
    <h3 style="margin-left: 10px">带有边框的卡片风格</h3>
    <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
      <el-tab-pane label="邓瑞" name="A">内容1</el-tab-pane>
      <el-tab-pane label="邓瑞编程" name="B">内容2</el-tab-pane>
      <el-tab-pane label="dengruicode.com" name="C">内容3</el-tab-pane>
    </el-tabs>

    <hr>
    <!-- 表单 -->
    <div>
      <el-button @click="dialog = true">打开</el-button>
    </div>
    <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose" style="margin-top: 10px">
      <el-form label-width="80">
        <el-form-item label="文本框">
          <el-input v-model="datas.name" placeholder="请填写名称"/>
        </el-form-item>

        <el-form-item label="单选框">
          <el-radio-group v-model="datas.radio">
            <el-radio value="1">前端</el-radio>
            <el-radio value="2">后端</el-radio>
            <el-radio value="3">服务端</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="复选框">
          <el-checkbox-group v-model="datas.checkbox">
            <el-checkbox value="a">前端</el-checkbox>
            <el-checkbox value="b">后端</el-checkbox>
            <el-checkbox value="c">服务端</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="日期时间">
          <el-date-picker v-model="datas.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"/>
        </el-form-item>

        <el-form-item label="下拉框">
          <el-select v-model="datas.select" placeholder="请选择">
            <el-option value="A" label="前端"/>
            <el-option value="B" label="后端"/>
            <el-option value="C" label="服务端"/>
          </el-select>
        </el-form-item>

        <el-form-item label="多选框">
          <el-select v-model="datas.multipleSelect" multiple placeholder="请选择">
            <el-option value="AA" label="前端"/>
            <el-option value="BB" label="后端"/>
            <el-option value="CC" label="服务端"/>
          </el-select>
        </el-form-item>

        <el-form-item label="文本域">
          <el-input type="textarea" v-model="datas.textarea" :rows="2" placeholder="请填写内容"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup>

import {ref} from 'vue'

//默认选中的菜单索引
const selectedIndex = ref("2-2")

//选中菜单触发的回调
const selected = (index, indexPath) => {
  console.log("index", index, "indexPath", indexPath)
}

//用户执行的命令
const userCommand = (command) => { //点击菜单触发的回调
  console.log("command:", command)
}
//默认选中的标签名称
const selectedName = ref("2")

//选中标签触发的回调
const tabClick = (tab, event) => {
  console.log("tab", tab.props, "event", event)
}


const datas = ref({
  name: '',
  radio: '',
  checkbox: [],
  date: '',
  select: '',
  multipleSelect: [],
  textarea: ''
})

const add = () => {
  console.log(datas.value)
}

const reset = () => {
  datas.value = {
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
  }
}
//对话框
const dialog = ref(false)

const dialogClose = () => {
  console.log("关闭")
}


</script>

<style>
h3 {
  font-size: 20px;
}
</style>